<template>
  <div class="flex-1 right flex flex-column">
    <div v-if="chatStore.isChatting"
      class="flex justify-content-between align-items-center p-2  bg-black-alpha-30 h-3rem relative">
      <span>{{ chatStore.getChatName }}</span>
      <span class="cursor-pointer" @click="handleUserConfig"><i class="pi pi-ellipsis-h"></i></span>
    </div>
    <div class="flex-1 relative" style="height: 500px;" ref="chatWindowRef" id="chatWindow">
      <!-- 私聊 -->
      <div v-if="!!chatStore.currentFriend.userId && !chatStore.currentFriend.groupId" class="overflow-y-scroll" style="height: inherit;">
        <div v-for="item in chatStore.friendMessageList" class="flex flex-column  p-2">
          <ChatMessageItem v-if="item.creator === 'USER'" :avatar="chatStore.currentFriend.avatar"
            :username="chatStore.currentFriend.username" :content="item.content"
            :is-to="item.userId !== chatStore.currentFriend.userId">
          </ChatMessageItem>
          <ChatSystemMessage v-if="item.creator === 'SYSTEM'" :content="item.content" />
        </div>


      </div>
      <!-- 群聊 -->
      <div v-if="!!chatStore.currentFriend.userId && chatStore.currentFriend.groupId" class="overflow-y-scroll"  style="height: inherit;">
        <div v-for="item in chatStore.groupMessageList.groupMessages" class="flex flex-column  p-2">
          <ChatMessageItem v-if="item.creator === 'USER'"
            :avatar="chatStore.groupMessageList.userData[item.userId].avatar"
            :username="chatStore.groupMessageList.userData[item.userId].username" :content="item.content"
            :is-to="item.userId === chatStore.user.userId">
          </ChatMessageItem>
          <ChatSystemMessage v-if="item.creator === 'SYSTEM'" :content="item.content" />
        </div>
      </div>
      <!-- @vue-skip -->
      <GroupChatSetting v-if="chatStore.currentFriend.groupId" :visible="chatStore.settingModelVisible" :user-list="(chatStore.groupUserList)" />
      <!-- @vue-skip -->
      <FriendChatSetting v-else :visible="chatStore.settingModelVisible" :user-list="[chatStore.currentFriend]"/>
    </div>
    <div class="h-8rem inputContainer">
      <div class="h-2rem">title</div>
      <Textarea v-model="content" :auto-resize="false" rows="5" cols="30" class="h-6rem input w-full"
        @keydown="handleKeydown" :pt="{
          root: {
            class: 'border-none ',
            style: 'box-shadow: 0 0 0 0px #e3f3fe; background: transparent;'
          }
        }" />
    </div>
  </div>
  <!-- <Teleport :to="chatWindowRef"> -->


  <!-- </Teleport> -->
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { Textarea, Sidebar } from '@/utils/primevue'
import useChatStore from '@/stores/chat'
import ChatMessageItem from './ChatMessageItem.vue';
import ChatSystemMessage from './ChatSystemMessage.vue';
import GroupChatSetting from './GroupChatSetting.vue';
import FriendChatSetting from './FriendChatSetting.vue';
import type { TUserModel } from '@/stores/typings/user';
const chatStore = useChatStore()
const content = ref<string>(``)
const chatWindowRef = ref<HTMLDivElement>()
// const emits = defineEmits([])


const handleKeydown = (e: KeyboardEvent) => {
  var keyCode = e.keyCode || e.which || e.charCode; //
  var ctrlKey = e.metaKey; // command键
  if (ctrlKey && keyCode == 13) {
    // 发送数据
    if (chatStore.currentFriend.groupId) {
      chatStore.sendGroupMessage(content.value)
    } else {
      chatStore.sendFrendMessage(content.value)
    }
    chatWindowRef.value?.scrollTo({ top: chatWindowRef.value?.scrollHeight, behavior: 'smooth' });
    content.value = ''
  }
  return false;
}

// 点击顶部配置
const handleUserConfig = () => {
  if (chatStore.currentFriend.groupId) {
    chatStore.queryUserListByGroupId(chatStore.currentFriend.groupId)
  } else {

  }

  chatStore.settingModelVisible = !chatStore.settingModelVisible
}



</script>

<style scoped lang="scss">
.inputContainer {
  background-color: #11111178;
}
</style>
